{% load static %}
<script>
    $(document).ready(function () {
        loadThisPage('firstRun');
    });

    function loadThisPage(method) {
        getRCMode();
        ReqConstructOper('r', method);
        swal({
            title: ' 成功',
            text: '刷新成功',
            icon: "success",
            timer: 1000,
            buttons: false,
        });
        console.log("111")
    }
</script>
<style>
    pre {
        outline: 1px solid #ccc;
        padding: 5px;
        margin: 5px;
        color: yellow;
    }

    .string {
        color: cornflowerblue;
    }

    .number {
        color: darkorange;
    }

    .boolean {
        color: blue;
    }

    .null {
        color: magenta;
    }

    .key {
        color: greenyellow;
    }
</style>

<div class="card">
    <div class="card-header">
        <div class="card-category">
            <h1 style="float:left;">请求体构造</h1>
            <ul class="nav nav-pills nav-primary" style="float:right">
                <li class="nav-item">
                    <a class="nav-link" href="#" id="req_constructor_normal_switch"
                       onclick="changeRCMode(this)">默认</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#" id="req_constructor_custom_switch"
                       onclick="changeRCMode(this)">自定义</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title" style='float:left'>操作</span>

                <button class="btn btn-primary" style='float:right;margin-left: 20px;'
                        onclick="ReqConstructOper('w',document.getElementById('requestHeader').innerText)">保存
                </button>
                <button class="btn btn-secondary" style='float:right;margin-left: 20px;'
                        onclick="check()">格式化&校验
                </button>
                <button class="btn btn-success" style='float:right;margin-left: 20px;'
                        onclick="loadThisPage()">重新加载
                </button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="form-group">
            <div class="form-group">
                <label for="requestHeader">请求体格式</label>
                <pre contenteditable="true" id='requestHeader'></pre>
            </div>
        </div>
    </div>
</div>

<script>
    function prettyPrint() {
        const ugly = document.getElementById('requestHeader').innerHTML;
        const obj = JSON.parse(ugly);
        document.getElementById('requestHeader').innerHTML = JSON.stringify(obj, undefined, 2);
        console.log("ok")
    }

    function check() {
        try {
            JSON.parse(document.getElementById('requestHeader').innerText)
            swal("操作成功", "校验以及格式化成功", {
                icon: "success",
                buttons: {
                    confirm: {
                        className: 'btn btn-success'
                    }
                },
            });
        } catch
            (e) {
            swal("JSON格式错误", String(e), {
                icon: "error",
                buttons: {
                    confirm: {
                        className: 'btn btn-danger'
                    }
                },
            });
            return;
        }
        output(document.getElementById('requestHeader').innerText);

    }

    function output(text) {
        document.getElementById('requestHeader').innerHTML = "";
        document.getElementById('requestHeader').appendChild(document.createElement('item')).innerHTML = syntaxHighlight(text);

    }

    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        result = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            let cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
        let tmp = result.replaceAll("span>,", 'span>,<br/>')
        return tmp.replaceAll("\n", "")
    }


</script>

